<script setup lang="ts">
import {ref} from "vue";
import {showToast} from "vant";


const activeIds = ref([]);
const activeIndex = ref(0);
const searchText = ref('')
const onSearch = (val: string) => {
  showToast(val);
};

const onCancel = () => {
  searchText.value = '';
  showToast('取消');
};

// 可选标签列表
const tagList = [
  {
    text: "专业",
    children: [
      {text: '软件工程', id: "软件工程"},
      {text: '计算机科学与技术', id: "计算机科学与技术"},
      {text: '软件与信息工程学院', id: "软件与信息工程学院"}
    ]
  }, {
    text: "学历",
    children: [
      {text: '本科', id: "本科"},
      {text: '硕士', id: "硕士"},
      {text: '博士', id: "博士"}
    ]
  }
  , {
    text: "性别",
    children: [
      {text: '男', id: "男"},
      {text: '女', id: "女"},
      {text: '其他', id: "其他"}
    ]
  }
]

// 删除标签
const onclose = (tag: string) => {
  activeIds.value = activeIds.value.filter(item => {
    return item !== tag;
  })
}


</script>

<template>
  <div id="search">
    <form>
      <van-search
          v-model="searchText"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
          @cancel="onCancel"
      />
    </form>
    <van-divider content-position="left">已选标签</van-divider>
    <div v-if="activeIds.length === 0">请选择标签</div>
    <div class="selected-tags">
      <van-row gutter="16" style="padding: 16px">
        <van-col v-for="tag in activeIds"
                 :key="tag">
          <van-tag
              closeable
              size="medium"
              type="primary"
              @close="onclose(tag)"
              class="tag-item">
            {{ tag }}
          </van-tag>
        </van-col>
      </van-row>


    </div>
    <van-divider content-position="left">选择标签</van-divider>
    <van-tree-select
        v-model:active-id="activeIds"
        v-model:main-active-index="activeIndex"
        :items="tagList"
    />
  </div>
</template>

<style scoped>
</style>